<template>
    <div>
        <div style="position: relative;padding-top:20px;">
            <el-form :model="formLine" ref="dynamicValidateForm" label-position="top" label-width="120px" class="demo-dynamic">
                <el-form-item label="损耗模版:" v-if="status==1">
                    <el-select v-model="formLine.sunid" filterable placeholder="请选择" size="small" @change="handlerSunhaoChange">
                        <el-option
                        v-for="(item, sindex) in sunhaoData" :key="sindex"
                        :label="item.sunhaodaima"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="损耗代码:" v-if="status != 1">
                    <el-input v-model="formLine.sunhaodaima" size="small"  ></el-input>
                </el-form-item>
                <!-- <el-switch @change="goSunChange"
                        v-model="formLine.sunhaoleixing" :width="swidth"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="数量"
                        inactive-text="百分比">
                    </el-switch> -->
                <el-form-item label="" >
                    <div style="display: inline-block;width:70px;vertical-align: middle;">
                        损耗类型:
                    </div>
                    <div style="display: inline-block;">
                        <el-radio-group v-model="formLine.sunhaoleixing" @change="goradios">
                            <el-radio :label="item.value" v-for="(item,index) in typeData" :key="index">{{ item.name }}</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="" v-if="status !=1">
                    <div style="display: inline-block;width:70px;vertical-align: middle;">
                        损耗状态:
                    </div>
                    <div style="display: inline-block;">
                        <el-radio-group v-model="formLine.zhuangtai">
                            <el-radio :label="item.value" v-for="(item,index) in statusData" :key="index">{{ item.name }}</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="损耗设置比例:" v-if="biliFlag">
                    <div style="margin-top:2px;"></div>
                    <div  v-for="(domain, index) in formLine.domains" :key="domain.key" style="margin-left:10px;position: relative;">
                        <div style="height:30px;line-height: 40px;display:flex;flex-wrap: nowrap;flex-direction: row;justify-content: flex-start;">
                            <div style="width:30%;display:inline-block;">第{{ index+1 }}级</div>
                            <div style="width:30%;display:inline-block;">订单数量</div>
                            <div style="width:30%;display:inline-block;">损耗数量</div>
                        </div>
                        <div style="display:flex;flex-wrap: nowrap;flex-direction: row;justify-content: flex-start;">
                            <div style="width:30%;">
                                <el-input v-model="domain.value1" size="small" placeholder="请输入" disabled style="width:90%;"></el-input>
                            </div>
                            <div style="width:30%;">
                                <el-input v-model="domain.value2" size="small" placeholder="请输入" :disabled="domain.value2abled" style="width:90%;" @input="goinput($event, index)" @blur="goinputBlur($event, index)"></el-input>
                            </div>
                            <div style="width:30%;">
                                <el-input v-model="domain.value3" size="small" placeholder="请输入" style="width:90%;"></el-input>
                            </div>
                        </div>
                    </div>
                    <div style="margin-left:10px">
                        <el-button @click="addDomain" size="mini" icon="el-icon-plus">添加</el-button>
                        <el-button @click="removeDomain" size="mini"  icon="el-icon-delete">删除</el-button>
                    </div>
                    <!-- <el-button @click.prevent="removeDomain(domain)">删除</el-button> -->
                </el-form-item>
                
                <el-form-item label="损耗描述:" v-if="status !=1">
                    <el-input type="textarea" v-model="formLine.sunhaomiaoshu" size="small" ></el-input>
                </el-form-item>
                <div style="position: fixed;bottom:20px;">
                    <el-button size="mini" @click="resetForm('dynamicValidateForm')">取消</el-button>
                    <el-button size="mini" type="primary" @click="submitForm('dynamicValidateForm')">确定</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    import { crudModuleListApi } from '@/api/develop'
    import { getDictDatainfoApi, getDictDataListApi } from '@/api/form'
    export default {
        data () {
            return {
                formLine: {
                    sunid: '',
                    sunhaomiaoshu:'',
                    sunhaodaima:'',
                    sunhaoshezhibili:'',
                    sunhaoleixing: '',
                    zhuangtai: '',
                    domains: [{
                          value1: 0,
                          value2: '',
                          value3: '',
                          value2abled: false,
                        },
                        {
                          value1: '',
                          value2: '',
                          value3: '',
                          value2abled: false,
                        },
                        {
                          value1: '',
                          value2: '',
                          value3: '',
                          value2abled: true,
                        }
                    ],
                },
                swidth: 80,
                sunid: '',
                suntype: 0, // 0百分比，1数量
                selectObj: null,
                biliFlag: false,
            }
        },
        props: {
            id: {
                type: [Number, String],
                default:()=> {
                    return 0
                }
            },
            rowObj: {
                type: Object,
                default: ()=>{
                    return {}
                }
            },
            status: {
                type: Number,
                default: ()=>{
                    return 0
                }
            },
            statusData: {
                type: Array,
                default: ()=>{
                    return []
                }
            },
            typeData: {
                type: Array,
                default: ()=>{
                    return []
                }
            },
            sunhaoData: {
                type: Array,
                default: ()=>{
                    return []
                }
            }
        },
        mounted() {
            console.log("rowjobj: ",this.rowObj)
            console.log("this.rowObj.sunhaoData", this.sunhaoData)
           if(this.id && this.status==2){
                this.biliFlag  = true;
                let sunhaoshezhebili= ''
                this.formLine.sunid = this.rowObj.id
                this.formLine.sunhaomiaoshu = this.rowObj.sunhaomiaoshu
                this.formLine.sunhaodaima = this.rowObj.sunhaodaima
                this.formLine.sunhaoshezhibili = this.rowObj.sunhaoshezhibili
                
                if(this.rowObj.sunhaoleixing){
                    this.formLine.sunhaoleixing = this.handlerFilter(this.rowObj.sunhaoleixing.name, this.typeData)
                }
                if(this.rowObj.zhuangtai){
                    this.formLine.zhuangtai = this.handlerFilter(this.rowObj.zhuangtai.name, this.statusData)
                }
                if(this.rowObj.sunhaoshezhibili){
                    this.formLine.domains = JSON.parse(this.rowObj.sunhaoshezhibili)
                }
           }else if(this.status==1){
                console.log("bilds:", this.rowObj.sunhao)
                let sunhaoobj = this.handlerbaseFilter(this.rowObj.sunhaodaima, this.sunhaoData)
                this.formLine.sunid = sunhaoobj.id;
                this.formLine.sunhaodaima = this.rowObj.sunhaodaima;
                this.formLine.sunhaomiaoshu = sunhaoobj.sunhaomiaoshu
                this.formLine.sunhaoleixing = this.rowObj.sunhaoleixing;
                if(this.rowObj.sunhao){
                    this.formLine.domains = JSON.parse(this.rowObj.sunhao)
                }
                console.log("this.formLine.domains", this.formLine.domains)
                if(sunhaoobj.zhuangtai){
                    this.formLine.zhuangtai = this.handlerFilter(sunhaoobj.zhuangtai.name, this.statusData)
                }
                this.biliFlag = this.formLine.sunhaoleixing == 1 ?true: false;
           }
           
        },
        methods: {
            goinput(val, index){
               if(val){
                  this.formLine.domains[index + 1].value1 = val;
               }else{
                this.formLine.domains[index + 1].value1 = val;
               }
            },
            goinputBlur(val, index){
                if(index > 0){
                    let val1 = this.formLine.domains[index].value1
                    let val2 = this.formLine.domains[index].value2
                    if(Number(val2) > Number(val1)){
                        
                    }else{
                        this.$message.info("输入数值不正确")
                        this.formLine.domains[index].value2 = '';
                        this.formLine.domains[index + 1].value1 = '';
                    }
                }
            },
            handlerFilter(val, data){
                for(let i=0;i<data.length;i++){
                    if(val == data[i].name){
                        return data[i].value;
                    }
                }
                return ''
            },
            handlerbaseFilter(val, data){
                for(let i=0;i<data.length;i++){
                    if(val == data[i].sunhaodaima){
                        return data[i];
                    }
                }
                return val;
            },
            handlerSunhaoChange(val){
               console.log(val);
                if(val){
                    for(let i=0;i< this.sunhaoData.length;i++){
                         if(val == this.sunhaoData[i].id){
                            this.selectObj = this.sunhaoData[i]
                            break;
                         }
                    }
                    console.log("select:", this.selectObj)
                    // this.formLine.sunhaomiaoshu = this.selectObj.sunhaomiaoshu;
                    // this.formLine.sunhaodaima = this.selectObj.sunhaodaima;
                    // this.formLine.zhuangtai = this.selectObj.zhuangtai;
                    if(this.selectObj.sunhaoleixing){ //损耗类型
                        this.formLine.sunhaoleixing = this.handlerFilter(this.selectObj.sunhaoleixing.name, this.typeData);
                        if(this.formLine.sunhaoleixing==1){
                            this.biliFlag = true;
                        }
                    }
                    console.log("this.selectObj.sunhaoshezhibili", this.selectObj.sunhaoshezhibili)
                    if(this.selectObj.sunhaoshezhibili){ //损耗设置比例
                        let datas = JSON.parse(this.selectObj.sunhaoshezhibili);
                        console.log("datas", datas)
                        this.formLine.domains = datas
                    }
                  
                }
            },
            goradios(val){
                if(this.status==1){
                    this.biliFlag = val==1?true: false;
                }
               console.log("val", val)
            },
            // 提交
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let formdata = {
                            sunhaodaima: this.formLine.sunhaodaima,
                            sunhaoleixing: this.formLine.sunhaoleixing,
                            sunhaomiaoshu: this.formLine.sunhaomiaoshu,
                            sunhaoshezhibili: JSON.stringify(this.formLine.domains),
                            zhuangtai: this.formLine.zhuangtai,
                        }
                        console.log("this.selectObj", this.selectObj)
                        if(this.status==1){
                            if(this.selectObj){
                                formdata.sunhaodaima = this.selectObj.sunhaodaima
                                formdata.sunhaomiaoshu = this.selectObj.sunhaomiaoshu
                                if(this.selectObj.zhuangtai){ //损耗类型
                                    formdata.zhuangtai  = this.handlerFilter(this.selectObj.zhuangtai.name, this.statusData);
                                }
                            }
                            this.$emit("handlersunhaoSubmit", formdata, 3)
                        }else{
                            this.$emit("handlersunhaoSubmit", formdata, this.id ? 2 : 1)
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$emit("handlersunhaoSubmit")
            },
            // 删除新增input级数据
            removeDomain(item) {
                let domainlength = this.formLine.domains.length;
                if(domainlength > 3){
                    this.formLine.domains.splice(domainlength-1, 1)
                }else{
                    this.formLine.domains[2].value2abled = true;
                    this.formLine.domains[2].value2 = ''
                }
            },
            // 新增input级数据
            addDomain() {
                let domindex = this.formLine.domains.length;
                this.formLine.domains.push({
                    value1: this.formLine.domains[domindex-1].value1 || '',
                    value2: '',
                    value3: '',
                    value2abled: true,
                    key: Date.now()
                });
                let ilength = this.formLine.domains.length;
                this.formLine.domains[ilength-2].value2abled = false;
                
            },
            goSunChange(val){
                console.log("损耗类型：",val)
            }
        }
 
    }

</script>
<style scoped>

/deep/ .el-form-item__label{
    line-height: 28px;
    padding-bottom:5px;
}
/deep/ .el-form-item{
    margin-bottom:10px;
}

</style>